---
title: Decap CMS y Astro
description: Añade contenido a tu proyecto Astro usando Decap como CMS
type: cms
stub: true
service: Decap CMS
i18nReady: true
---
import Grid from '~/components/FluidGrid.astro'
import Card from '~/components/ShowcaseCard.astro'
import { FileTree } from '@astrojs/starlight/components'
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

[Decap CMS](https://www.decapcms.org/) (anteriormente Netlify CMS) es un sistema de gestión de contenido de código abierto basado en Git.

Decap te permite aprovechar al máximo todas las funciones de Astro, incluida la optimización de imágenes y las colecciones de contenido.

Decap añade una ruta (normalmente `/admin`) a tu proyecto que cargará una aplicación React para permitir a los usuarios autorizados administrar el contenido directamente desde el sitio web desplegado. Decap enviará los cambios directamente al repositorio fuente de su proyecto Astro.

## Instalar DecapCMS

Hay dos opciones para añadir Decap a Astro:

1. [Instala Decap a través de un administrador de paquetes](https://decapcms.org/docs/install-decap-cms/#installing-with-npm) con el siguiente comando:

  <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install decap-cms-app
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add decap-cms-app
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add decap-cms-app
      ```
      </Fragment>
    </PackageManagerTabs>

2. Importa el paquete a una etiqueta `<script>` dentro del `<body>` de tu página.

```html title='/admin'
     <body>
       <!-- Incluye el script que crea la página y alimenta Decap CMS -->
       <script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script>
    </body>
```

## Configuración

1. Crea una carpeta de administración estática en `public/admin/`
2. Agrega `config.yml` a `public/admin/`:
     <FileTree>
      - public
        - admin
          - config.yml
    </FileTree>

3. Para agregar soporte para colecciones de contenido, configura cada esquema en `config.yml`. El siguiente ejemplo configura una colección `blog`, definiendo una `etiqueta` para la propiedad frontmatter de cada entrada:
     ```yml title="/public/admin/config.yml"
     collections:
       - name: "blog" # Usado en rutas, por ejemplo, /admin/collections/blog
         label: "Blog" # Usado en la interfaz de usuario
         folder: "src/content/blog" # La ruta a la carpeta donde se almacenan los documentos
         create: true # Permitir a los usuarios crear nuevos documentos en esta colección
         fields: # Los campos para cada documento, generalmente al principio
            - { label: "Layout", name: "layout", widget: "hidden", default: "blog" }
            - { label: "Title", name: "title", widget: "string" }
            - { label: "Publish Date", name: "date", widget: "datetime" }
            - { label: "Featured Image", name: "thumbnail", widget: "image" }
            - { label: "Rating (scale of 1-5)", name: "rating", widget: "number" }
            - { label: "Body", name: "body", widget: "markdown" }
     ```

4. Agregar la ruta `admin` para tu aplicación React. Este archivo puede ser `public/admin/index.html` junto con `config.yml` o, si prefieres utilizar una ruta de Astro, `src/pages/admin.astro`.

     <FileTree>
     - public
       - admin
          -config.yml
          - index.html
     </FileTree>
     ```html title="/public/admin/index.html" {7, 11}
     <!doctype html>
     <html lang="es">
       <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="robots" content="noindex" />
        <link href="/admin/config.yml" type="text/yaml" rel="cms-config-url" />
        <title>Administrador de contenidos</title>
       </head>
      <body>
        <script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script>
      </body>
    </html>
    ```

5. Para habilitar la carga de medios a una carpeta específica a través del editor de Decap, agrega una ruta adecuada:
     ```yml title="/public/admin/config.yml"
     media_folder: "src/assets/images" # Ubicación donde se almacenarán los archivos en el repositorio
     public_folder: "src/assets/images" # El atributo src para los medios cargados
     ```

Consulta la [documentación de configuración de Decap CMS](https://decapcms.org/docs/configure-decap-cms/) para obtener instrucciones y opciones completas.

## Uso
Navega hasta `yoursite.com/admin/` para usar el editor de Decap CMS.

## Autenticación

### Decap CMS con Netlify Identity

Decap CMS fue desarrollado originalmente por Netlify y tiene soporte de primera clase para [Netlify Identity](https://docs.netlify.com/security/secure-access-to-sites/identity/).

Cuando despliegues en netlify, configura la identidad para tu proyecto a través del panel de Netlify e incluye el [Netlify Identity Widget](https://github.com/netlify/netlify-identity-widget) en la ruta `admin` de tu proyecto. Opcionalmente, incluye el widget de identidad en la página de inicio de tu sitio si planeas invitar a nuevos usuarios por correo electrónico.

### Decap CMS con clientes OAuth externos

Cuando despliegues en proveedores de hosting distintos de Netlify, debes crear tus propias rutas OAuth.

En Astro, esto se puede hacer con rutas renderizadas bajo demanda en tu proyecto configurado con la [salida `server` o `hybrid`](/es/guides/server-side-rendering/#habilita-la-renderización-de-servidor-bajo-demanda) activada.

Consulta los [Documentos OAuth de Decap](https://decapcms.org/docs/external-oauth-clients/) para obtener una lista de clientes OAuth compatibles mantenidos por la comunidad.

## Recursos de la comunidad

- Plantilla de identidad de Netlify: [astro-decap-ssg-netlify](https://github.com/OliverSpeir/astro-decap-ssg-netlify-identity)

- Representación bajo demanda de rutas Oauth con plantilla Astro: [astro-decap-starter-ssr](https://github.com/OliverSpeir/astro-decap-starter-ssr)

- Publicación de blog: [Crea el contenido de tu sitio Astro con CMS basados en Git] (https://aalam.vercel.app/blog/astro-and-git-cms-netlify) por Aftab Alam

- Tutorial de Youtube: [¡Crea un blog personalizado con Astro y NetlifyCMS en MINUTOS!](https://www.youtube.com/watch?v=3yip2wSRX_4) por Kumail Pirzada

## Sitios en producción

Los siguientes sitios usan Astro + Decap CMS en producción:

- [yunielacosta.com](https://www.yunielacosta.com/) por Yuniel Acosta - [código fuente en GitHub](https://github.com/yacosta738/yacosta738.github.io) (Netlify CMS)
- [portfolioris.nl](https://www.portfolioris.nl/) por Joris Hulsbosch – [código fuente en GitHub](https://github.com/portfolioris/portfolioris.nl)

## Temas

<Grid>
  <Card title="Astros" href="https://astro.build/themes/details/astros" thumbnail="astros.png"/>
  <Card title="Enhanced Astro Starter" href="https://astro.build/themes/details/enhanced-astro-starter" thumbnail="enhanced-astro-starter.png"/>
  <Card title="Astro Decap CMS Starter" href="https://astro.build/themes/details/astro-decap-cms-starter" thumbnail="astro-decap-starter.png"/>
</Grid>
